<template>
    <span>
        <el-row>
            <el-col :span="8" v-for="item in list" :key="key">

                <el-card class="box-card">
                        <div slot="header" class=" clearfix">
                            <span>{{item.title}}</span>
                            <el-button @click="editConfig(item.key)" style="float: right; padding: 3px 0"
                                       type="text">编辑</el-button>
                        </div>
                        <div class="text item" v-html="item.content">
                        </div>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog custom-class="dialog" :title="dialogTitle" :width="dialogWidth" :before-close="dialogConfirmClose"
                   top="7vh" :visible.sync="dialogVisible">
            <router-view name="dialog" @title="setDialogTitle" @change="dialogClose" @back="dialogClose"></router-view>
        </el-dialog>

    </span>
</template>
<script>
    export default {
        data() {
            return {
                key: null,
                list: {},
                dialogConfirmCancel: false,//锁定后,关闭要弹出确认
                dialogVisible: false,
                dialogTitle: '',
                dialogWidth: '40%',
            }
        },
        beforeRouteUpdate(to, from, next) {
            if (to.matched.some(record => record.meta.dialog)) {
                this.dialogVisible = true;
            }
            next();
        },
        created() {
            this.$http.get('/system/config')
                .then((data) => {
                    console.log(data);
                    if (data.data.status == 1) {
                        this.list = data.data.data;
                    } else {
                        this.$message.error('参数解析错误');
                    }
                }).catch((e) => {
                this.$message.error('获取错误失败');
            })
        },
        methods: {
            editConfig: function (action) {
                this.$router.push({path: '/config/edit/config.' + action + '/' + action})
            },
            dialogConfirmClose: function (done) {
                if (this.dialogConfirmCancel) {
                    this.$confirm('是否放弃编辑内容？')
                        .then(_ => {
                            this.$router.go(-1);
                            done();
                        }).catch(_ => {
                    });
                } else {
                    this.$router.go(-1);
                    done();
                }
            },
            dialogClose: function () {
                this.dialogVisible = false;
                this.$router.go(-1);
            },
            setDialogTitle: function (title) {
                this.dialogTitle = title;
            }
        }
    }
</script>
<style scoped>
    .card {
        cursor: pointer;
    }

    .text {
        font-size: 14px;
    }

    .item {
        padding: 0px 0;
    }

    .box-card {
        margin: 10px;
        height: 200px;
        overflow: auto;
    }
</style>
